<style scoped>
  .el-aside {
    left: 0;
    top: 0;
    position: fixed;
    background-color: #495060;
    height: 100vh;
  }

  .el-main {
    height: 100vh;
    background-color: #f3f3f3;
    margin-left: 250px;
  }

  .el-menu {
    border-right: none;
    margin-top: 10px;
  }

  .el-aside > h1 {
    font-size: 1rem;
    color: #fff;
    background-color: #5b6270;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
</style>
<template>
  <el-container>
    <el-aside width="250px">
      <h1>项目名称</h1>
      <el-menu default-active="indoor" :router='true' background-color='#495060'
               text-color='#fff' active-text-color='#ffd04b'>
        <el-menu-item v-for='item in links' :index='item.href' :key='item.href'>{{item.name}}</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<script>
  export default {
    data() {
      return {
        links: [{
          name: '室内环境',
          href: 'indoor'
        }, {
          name: '室外环境',
          href: 'outdoor'
        }, {
          name: '气象天气',
          href: 'weather'
        }, {
          name: '土壤环境',
          href: 'soil'
        },/* {
          name: '一周数据',
          href: 'sevendaydata'
        }, */{
          name: '参数设置',
          href: 'setting'
        }/*, {
          name: '示例',
          href: 'example'
        }, {
          name: '测试页面',
          href: 'test'
        }*/]
      }
    },
    methods: {}
  }
</script>
